<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}{% endblock %}</title>
  <!--通用的部分-->
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'css/footer.css' %}" />
  <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
  <!--利用external区块导入外部文件-->
  {% block external %}{% endblock %}
</head>

<body>
{% block header %}
<div id="header">
  <nav class="navbar navbar-inverse" role="navigation" style="margin-bottom: 0; border-radius: 0;">
    <div class="container">
      <!--导航栏被折叠时，只显示首页和折叠按钮-->
      <div class="navbar-header">
        <a class="navbar-brand" href="{% url 'overview:index' %}">首页</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-navbar-collapse">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!--被折叠的部分-->
      <div class="collapse navbar-collapse" id="header-navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="{% url 'departments:index' %}">院系部门</a></li>
          <li><a href="{% url 'communications:information' 1 %}">留言板</a></li>
        </ul>
        <!--将用户相关的部分放在导航栏右侧-->
        <ul class="nav navbar-nav navbar-right">
          <!--只有用户未登录的时候才显示登录注册-->
          {% if not request.user.is_authenticated %}
            <li><a href="{% url 'users:login' %}"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            <li><a href="{% url 'users:register' %}"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
          <!--只有用户登陆的时候才显示个人信息-->
          {% else %}
            <!--用户在导航栏上的头像-->
            <li>
              <a href="{% url 'users:base-information' request.user.id %}" style="height: 50px; padding-top: 0;padding-bottom: 0;">
                {% if user.image %}
                  <img src="{{ user.image.url }}" alt="头像" class="img-circle" style="height: 50px;width: auto;"/>
                {% else %}
                  <img src="{% static 'images/users/settings/sample.jpg' %}" alt="默认图像" class="img-circle" style="height: 50px;width: auto;" />
                {% endif %}
              </a>
            </li>
            <!--个人信息-->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人信息<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="{% url 'users:base-information' request.user.id %}">设置</a></li>
                <li class="divider"></li>
                <li><a href="{% url 'users:space' request.user.id %}">个人空间</a></li>
                <li class="divider"></li>
                <li><a href="{% url 'users:management' request.user.id %}">管理</a></li>
                <li class="divider"></li>
                <li><a href="{% url 'users:logout' %}">注销</a></li>
              </ul>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>
</div>
{% endblock %}

<!--在这里添加主体内容-->
{% block main %}
{% endblock %}

{% block footer %}
  <div id="footer" class="container-fluid" style="background-color: #222;">
    <div class="row">
      <div class="col-sm-4">
        <div class="footer-box">
          <h3>关于我们</h3>
          <p><a href="#" style="color: lightblue;">极客协会</a></p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="footer-box">
          <h3>联系方式</h3>
          <p><span class="glyphicon glyphicon-phone"></span>19851920392</p>
          <p><span class="glyphicon glyphicon-envelope"></span>942345433@qq.com</p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="footer-box" style="border-bottom: none;">
          <h3>鸣谢</h3>
          <p>Bootstrap</p>
          <p>Django</p>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
</body>
</html>